<template>
  <div class="select">
    <!--    省-->
    <el-select v-model="pCode" class="select-item" filterable placeholder="请选择省" @change="changeP">
      <el-option
        v-for="item in provinceList"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>
    <!--    市-->
    <el-select v-model="cCode" class="select-item" filterable placeholder="请选择市" @change="changeC">
      <el-option
        v-for="item in cityList"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>
    <!--    区县-->
    <el-select v-model="aCode" class="select-item" filterable placeholder="请选择区县" @change="changeA">
      <el-option
        v-for="item in areaList"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>
    <!--    街道-->
    <el-select v-model="sCode" class="select-item" filterable placeholder="请选择街道" @change="changeS">
      <el-option
        v-for="item in streetList"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      />
    </el-select>
  </div>
</template>

<script>
import { getAddress } from '@/api/common'
export default {
  name: 'AddressSelect',
  props: {
    value: {
      type: [Object, String],
      default: () => {}
    }
  },
  data() {
    return {
      pCode: '',
      pName: '--',
      cCode: '',
      cName: '--',
      aCode: '',
      aName: '--',
      sCode: '',
      sName: '--',
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: []
    }
  },
  mounted() {
    if (this.value === '') {
      this.value = {}
    }
    this.pCode = this.value.province
    this.cCode = this.value.city
    this.aCode = this.value.area
    this.sCode = this.value.street
    // this.pName = this.data.provinceName
    // this.cName = this.data.cityName
    // this.aName = this.data.areaName
    // this.sName = this.data.streetName
    this.getAddress()
  },
  methods: {
    changeActive(val) {
      console.log('类型切换', val)
      this.active = val
    },
    async getAddress() {
      const pData = await getAddress({})
      this.provinceList = pData.data
      if (!this.pCode) return
      const cData = await getAddress({ province: this.pCode })
      console.log('城市', cData)
      this.cityList = cData.data
      if (!this.cCode) return
      const aData = await getAddress({ province: this.pCode, city: this.cCode })
      this.areaList = aData.data
      if (!this.aCode) return
      const sData = await getAddress({ province: this.pCode, city: this.cCode, area: this.aCode })
      this.streetList = sData.data
    },
    changeP(val) {
      console.log('选择了省', val)
      // this.pName = val.name
      this.pCode = val
      this.cityList = []
      this.areaList = []
      this.streetList = []
      // this.cName = '--'
      this.cCode = ''
      // this.aName = '--'
      this.aCode = ''
      // this.sName = '--'
      this.sCode = ''
      this.active = 'city'
      getAddress({ province: this.pCode }).then(res => {
        console.log('加载结果', res)
        this.cityList = res.data
      })
      this.changeData()
    },
    changeC(val) {
      console.log('选择了市', val)
      // this.cName = val.name
      this.cCode = val
      this.areaList = []
      this.streetList = []
      // this.aName = '--'
      this.aCode = ''
      // this.sName = '--'
      this.sCode = ''
      this.active = 'area'
      getAddress({ province: this.pCode, city: this.cCode }).then(res => {
        this.areaList = res.data
      })
      this.changeData()
    },
    changeA(val) {
      console.log('选择了区', val)
      // this.aName = val.name
      this.aCode = val
      this.streetList = []
      // this.sName = '--'
      this.sCode = ''
      this.active = 'street'
      getAddress({ province: this.pCode, city: this.cCode, area: this.aCode }).then(res => {
        this.streetList = res.data
      })
      this.changeData()
    },
    changeS(val) {
      console.log('选择了街道', val)
      // this.sName = val.name
      this.sCode = val
      const data = {
        province: this.pCode,
        city: this.cCode,
        area: this.aCode,
        street: this.sCode
        // provinceName: this.pName,
        // cityName: this.cName,
        // areaName: this.aName,
        // streetName: this.sName
      }
      console.log('回调数据', data)
      this.changeData()
    },
    changeData() {
      this.$emit('input', {
        province: this.pCode,
        city: this.cCode,
        area: this.aCode,
        street: this.sCode
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.select{
  display: inline;
  width: 720px;
  .select-item{
    width: 120px;
  }
}
</style>
